<template>
  <div class="test">
    <div class="test-item">
      <div class="question-header">
        <div class="question-title">
          {{page.exampageName}}
        </div>
        <div class="time">
          <div class="startandend" :class="screenWidth <=1080 ? 'none': 'block'">
            提交人:{{name}}
            提交时间:{{format(page.endTime)}}
            试卷得分:{{page.totalScore}}
          </div>
          <div class="setInterval" :class="screenWidth <=1080 ? 'text-align': ''">{{content}}</div>
        </div>
      </div>

      <div class="questions">
        <div class="topic">
          <div class="topic-item">
            <div>
              <h1 class="title">选择题</h1>
              <!--            单选-->
              <el-card class="box-card">
                <div v-show="page.choice.length !== 0">
                  <h2>单选</h2>
                  <div v-for="(item,index) in page.choice" :key="index" class="margin-bottom">
                    <div class="font-size" style="display: inline-flex;" :id="'SingleChoice'+index">{{index+1}}、

                      <p>
                        <span v-html="item.title" ></span>
                      </p>
                    </div>
                    <div class="display-flex margin-top-five">
                      <div v-for="(it,i) in item.items" class="display-flex-item ">
                        <el-radio disabled v-model="item.correctArray" :label="it.prefix"
                                  :name="it.content"  class="font-size ddd"
                        >{{it.prefix}}、{{it.content}}
                        </el-radio>
                      </div>
                    </div>

                    <div class="score">{{'分值: ' + item.score}}</div>

                    <div class="result">
                      <span>{{'结果: ' }}</span>
                      <el-tag style="margin-left: 1%" size="medium"  :type="getTagType(item.score)"><span class="font_size">{{getTagName(item.score)}}</span></el-tag>
                    </div>
                    <div class="analyze" style="display: inline-flex;line-height: 20px;">
                      <span style="width: 50px;">{{'解析:'}}</span>

                      <p style="width: 50%;"><span v-html="item.analyze"></span></p>
                    </div>
                    <div class="answer">正确答案: <span style="padding-left: 10px" v-html="item.correctArray"></span></div>

                  </div>
                </div>

                <!--            多选-->
                <div v-show="page.multChoices.length !== 0">
                  <h2>多选</h2>
                  <div v-for="(item,index) in page.multChoices" class="margin-bottom">
                    <div class="font-size" style="display: inline-flex;" :id="'MultipleChoice'+index">{{index+1}}、

                      <p>
                        <span v-html="item.title" ></span>
                      </p>
                    </div>
                    <div class="display-flex margin-top-five">
                      <div v-for="(it,i) in item.items" class="display-flex-item">
                        <el-checkbox disabled v-model="it.checked" :label="it.prefix"
                                     :name="it.content">
                          {{it.prefix}}、{{it.content}}
                        </el-checkbox>
                      </div>
                    </div>
                    <div class="score">{{'分值: ' + item.score}}</div>

                    <div class="result">
                      <span>{{'结果: ' }}</span>
                      <el-tag style="margin-left: 1%" size="medium"  :type="getTagType(item.score)"><span class="font_size">{{getTagName(item.score)}}</span></el-tag>
                    </div>

                    <div class="analyze" style="display: inline-flex;line-height: 20px;">
                      <span style="width: 50px;">{{'解析:'}}</span>

                      <p style="width: 50%;"><span v-html="item.analyze"></span></p>
                    </div>
                    <div class="answer">正确答案: <span style="padding-left: 10px" v-html="item.correctArray"></span></div>

                  </div>
                </div>
              </el-card>

            </div>

            <div class="margin-top top" v-show="page.judge.length !== 0">
              <h1 class="title">判断题</h1>
              <el-card class="box-card">
                <div v-for="(item,index) in page.judge" class="margin-bottom">
                  <div class="font-size" :id="'TrueFalse'+index" style="display: inline-flex;">
                    {{index+1}}、
                    <p>
                      <span v-html="item.title" ></span>
                    </p>

                  </div>
                  <div class="display-flex margin-top-five">
                    <div v-for="(it,i) in item.items" class="display-flex-item">
                      <!--                <div>{{item.prefix}}.{{item.content}}</div>-->
                      <el-radio disabled v-model="item.correctArray" :label="it.prefix"
                                :name="it.content"
                      >{{it.prefix}}、{{it.content}}
                      </el-radio>
                    </div>
                  </div>
                  <div class="score">{{'分值: ' + item.score}}</div>

                  <div class="result">
                    <span>{{'结果: ' }}</span>
                    <el-tag style="margin-left: 1%" size="medium"  :type="getTagType(item.score)"><span class="font_size">{{getTagName(item.score)}}</span></el-tag>
                  </div>
                  <div class="analyze" style="display: inline-flex;line-height: 20px;">
                    <span style="width: 50px;">{{'解析:'}}</span>

                    <p style="width: 50%;"><span v-html="item.analyze"></span></p>
                  </div>
                  <div class="answer">正确答案: <span style="padding-left: 10px" v-html="item.correctArray"></span></div>

                </div>
              </el-card>

            </div>

            <div class="margin-top top" v-show="page.pack.length !== 0">
              <h1 class="title">填空题</h1>
              <el-card class="box-card">
                <div v-for="(item,index) in page.pack" class="margin-bottom">
                  <div class="font-size" style="display: inline-flex;" :id="'GapFilling'+index">{{index+1}}、

                    <p>
                      <span v-html="item.title" ></span>
                    </p>

                  </div>
                  <div class="input-item display-flex margin-top-five vertial" >
                    <div>{{'答案:'}}</div>
                    <span v-html="packAnswer[index].analyze"></span>
                  </div>

                  <div class="score">{{'分值: ' + item.score}}</div>
                  <div class="analyze" style="display: inline-flex;line-height: 20px;">
                    <span style="width: 70px;font-weight: bold">{{'解析:'}}</span>

                    <p style="width: 70%;"><span v-html="item.analyze"></span></p>
                  </div>
                  <div class="answer">正确答案: <span style="padding-left: 10px" v-html="item.correctArray"></span></div>
                  <div class="correct">
                    <label style="color: rgb(230,162,60);font-weight: bold">{{'批改:'}}</label>
                    <el-input-number   v-model="fillScore[index]" :min="1" :max="5"></el-input-number>
                  </div>
                </div>
              </el-card>
            </div>

            <div class="margin-top top" v-show="page.bigQuestions.length !== 0">
              <h1 class="title">简答题</h1>
              <el-card class="box-card">
                <div v-for="(item,index) in page.bigQuestions" class="margin-bottom">
                  <div class="font-size" style="display: inline-flex;" :id="'ShortAnswer'+index">{{index+1}}、

                    <p>
                      <span v-html="item.title" ></span>
                    </p>

                  </div>
                  <div class="textarea-item display-flex margin-top-five vertial">
                    <div>{{'答案:'}}</div>
                    <!--<el-input readonly type="textarea" placeholder="请输入内容" class="textarea" v-model="ShortAnswers[index]"
                              maxlength="500"
                              show-word-limit/>-->
                    <span v-html="bigQuestionAnswer[index].analyze"></span>
                  </div>
                  <div class="score">{{'分值: ' + item.score}}</div>
                  <div class="analyze" style="display: inline-flex;line-height: 20px;">
                    <span style="width: 45px;font-weight: bold">{{'解析:'}}</span>

                    <p style="width: 50%;"><span v-html="item.analyze"></span></p>
                  </div>
                  <div class="answer">正确答案: <span style="padding-left: 10px" v-html="item.correctArray"></span></div>
                  <div class="correct">
                    <label style="color: rgb(230,162,60);font-weight: bold">{{'批改:'}}</label>
                    <el-input-number  v-model="questionScore[index]" :min="1" :max="5"></el-input-number>
                  </div>
                </div>
              </el-card>

            </div>

            <div class="margin-left" :class="screenWidth <=1080 ? 'width': ''">
              <el-button type="primary" :class="screenWidth <=1080 ? 'btn-wthree': ''" size="medium" :disabled="this.status === '2'" @click="submit">
                提交
              </el-button>
              <el-button style="margin-left: 20%" type="success" :class="screenWidth <=1080 ? 'btn-wthree': ''" :disabled="this.status === '2'" size="medium" @click="save">返回</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="trues" :class="sss === 0 ? 'none':'block'">吃的吃大餐的从差点迟到</div>
  </div>
</template>
<script>
  import questions from '../../../utils/question_lyf'
  import { getAnswerByAnswerId, queryExamPage, queryUserById, teacherJudge } from '../../../api';
  export default {
    name: 'CorrectPaper',
    data() {
      return {
        num: [0,0,0,0,0,0,0,0],
        question: {},
        hour: 12,
        minute: 60,
        second: 60,
        clock: undefined,
        content: "",
        //选择题
        //单选
        SingleChoices: [],
        allSingleChoices: [],
        //多选
        allMultipleChoice: [],
        //判断
        TrueFalses: [],
        allTrueFalses: [],
        //填空
        GapFillings: [],
        allGapFillings: [],
        //简答
        ShortAnswers: [],
        allShortAnswers: [],
        //屏幕宽度
        screenWidth: 0,
        dialogVisible: false,
        //按键编码
        key: 0,
        sss: 0,
        status: '',
        answerId: '',
        exampageId: '',


        page: {
          exampageId: '',
          exampageName: '',
          adviceTime: '',
          createTime: '',
          endTime: '',
          startTime: '',
          choice: [],
          multChoices: [],
          judge: [],
          pack: [],
          bigQuestions: [],
          totalScore: 0
        },

        fillScore: [],
        questionScore: [],
        answerVo: {},
        name: '',
        bigQuestionAnswer: [],
        packAnswer: []

      }
    },
    methods: {
      getQuestion() {
        this.setArrays();//初始化二位数组
        //初始化一维数组
        this.allSingleChoices = [...this.setArray(this.page.choice)];
        this.allTrueFalses = [...this.setArray(this.page.judge)];
        this.allGapFillings = [...this.setArray(this.page.pack)];
        this.allShortAnswers = [...this.setArray(this.page.bigQuestion)];
        // console.log(this.allSingleChoices);
        /*let split1 = this.setTime(this.question.startTime);
        let split2 = this.setTime(this.question.endTime);
        this.subtract(split1, split2);*/
        this.setNum();
        console.log(this.questionScore);
        console.log(this.fillScore);

      },

      setArrays() {//设置二维数组
        for (let i in this.page.multChoices) {
          this.allMultipleChoice[i] = new Array();
          for (let j in this.page.multChoices.items) {
            this.allMultipleChoice[i][j] = ""
          }
        }
      },

      setArray(arr) {//设置所有的一维数组
        let array = [];
        for (let i in arr) {
          array[i] = ""
        }
        return array;
      },

      // 初始化 填空题分数数组
      setNum(){
        let array = new Array(20).fill(0);
        this.fillScore = array;
        this.questionScore = array;
      },



      setTime(time) {//截取小时
        return time.split(" ")[1];
      },

      /*      SingleChoiceBtn(index) {//单选
              this.allSingleChoices[index] = this.SingleChoices[index];
              console.log(this.allSingleChoices);
            },

            MultipleChoiceBtn(index, i, prefix, item) {//多选
              console.log(item);
              let multipleChoice = this.question.questions[0].MultipleChoice;
              for (let m in multipleChoice) {
                if (m == index) {
                  for (let n in multipleChoice[index].optionList) {
                    if (n == i) {
                      if (item.checked === true) {
                        this.allMultipleChoice[index][i] = multipleChoice[index].optionList[i].prefix;
                      } else {
                        this.allMultipleChoice[index][i] = "";
                      }
                    }
                  }
                }
              }
              console.log(this.allMultipleChoice);
            },

            TrueFalseBtn(index) {//判断
              this.allTrueFalses[index] = this.TrueFalses[index];
              console.log(this.allTrueFalses);
            },

            GapFillingsBtn(index) {//填空
              this.allGapFillings[index] = this.GapFillings[index];
              console.log(this.allGapFillings);
            },

            ShortAnswersBtn(index) {//简答
              this.allShortAnswers[index] = this.ShortAnswers[index];
              console.log(this.allShortAnswers);
            },*/

      async submit() {

        let fillArray = [];

        let questionArray = [];
        if (this.answerVo.pack !== undefined) {

          for (let i in this.answerVo.pack) {
            fillArray.push(parseInt(i));
          }
        }


        if (this.answerVo.bigQuestions !== undefined) {
          for (let i in this.answerVo.bigQuestions) {
            questionArray.push(parseInt(i));
          }
        }

        let fillScore = 0;
        for (let i = 0; i < fillArray.length; i++) {
          fillScore += this.fillScore[i];
          this.answerVo.pack[fillArray[i]].score = this.fillScore[i];
        }

        let questionScore = 0;
        for (let i = 0; i < questionArray.length; i++) {
          questionScore += this.questionScore[i];
          this.answerVo.bigQuestions[questionArray[i]].score = this.questionScore[i];
        }

        console.log(this.answerVo);

        let answerId = this.answerVo.answerId;
        let bigQuestions =  this.answerVo.bigQuestions;
        let bigQuestionsScore = questionScore + fillScore;
        let choice = this.answerVo.choice;
        let exampageId = this.answerVo.exampageId;
        let judge = this.answerVo.judge;
        let multChoices = this.answerVo.multChoices;
        let otherScore = this.answerVo.otherScore;
        let pack = this.answerVo.pack;
        let status = 1;
        let userId = this.answerVo.userId;

        await teacherJudge({answerId:answerId,bigQuestions:bigQuestions,bigQuestionsScore:bigQuestionsScore,choice:choice,exampageId:exampageId,judge:judge,multChoices:multChoices,otherScore:otherScore,pack:pack,status:status,userId:userId});

        this.$message.success("批改成功!");
        await this.$router.go(-1);
      },
      save(){
        this.$router.go(-1);
      },
      handleClose() {
        this.dialogVisible = false;
        // console.log("xsxsxsxsx");
        // console.log(done);
        // this.$confirm('确认关闭？').then(_ => {
        //   done();
        // }).catch(_ => {
        // });
      },
      format(str){
        let datetime = new Date(str);
        let year = datetime.getFullYear();
        let month = datetime.getMonth();
        let date = datetime.getDate();
        let hour = datetime.getHours();
        let minute = datetime.getMinutes();
        let second = datetime.getSeconds();

        let result1 = year +
                '-' +
                ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                '-' +
                ((date + 1) < 10 ? '0' + date : date) +
                ' ' +
                ((hour + 1) < 10 ? '0' + hour : hour) +
                ':' +
                ((minute + 1) < 10 ? '0' + minute : minute) +
                ':' +
                ((second + 1) < 10 ? '0' + second : second);


        return result1;
      },
      getTagName(score){
        if (score !== '0'){
          return '正确';
        }else{
          return '错误';
        }
      },
      getTagType(score){

        if (score !== '0'){
          return 'success';
        }else{
          return 'danger';
        }
      },
    },
    created() {
      this.getQuestion();
    },
    async mounted() {
      this.screenWidth = document.body.clientWidth;
      // this.screenHeight = document.body.clientHeight;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          // this.screenHeight = document.body.clientHeight;
        })();
      };
      // console.log("mounted" + document.body.clientWidth);
      // console.log(document.body.clientHeight);

      let answerId = this.$route.query.answerId;
      let status = this.$route.query.status;
      let exampageId = this.$route.query.exampageId;

      this.status = status;
      this.answerId = answerId;
      this.exampageId = exampageId;

      const datas = await getAnswerByAnswerId({answerId:answerId});
      this.answerVo = datas.answerVO;

      console.log(this.answerVo);


      let arr = [];
      for (let i in this.answerVo.pack) {
        let o = {
          analyze: ''
        };
        o.analyze = this.answerVo.pack[i].analyze;
        arr.push(o)
      }
      this.packAnswer = arr;

      let arr2 = [];
      for (let i in this.answerVo.bigQuestions) {
        let o = {
          analyze: ''
        };
        o.analyze = this.answerVo.bigQuestions[i].analyze;
        arr2.push(o)
      }
      this.bigQuestionAnswer = arr2;


      const data = await queryExamPage({id:exampageId});
      this.page = data.examPage;

      let userId = this.answerVo.userId;
      let user = await queryUserById({ Id: userId });
      this.name = user.user.name;
    },
    watch: {

      screenWidth: {
        handler: (newVal, oldVal) => {
          // console.log("watch" + newVal);
        }
      },
      key: {
        handler(newVal, oldVal) {
          console.log(newVal);
          if (newVal >= 10 && newVal <= 13) {
            this.sss = 1;
            if (newVal === 13) {
              this.key = 0;
            }
          } else {
            this.sss = 0;
          }
        }
      }
    }
  };
</script>

<style>
  .test {
    width: 100%;
  }

  .test-item {
    width: 100%;
  }

  .question-header {
    font-size: 20px;
    text-align: center;
  }

  .question-title {
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    margin-left: 20%;
  }


  .time, .questions {
    display: flex;

  }


  .startandend {
    width: 100%;
    margin-left: 20%;
  }

  .topic {
    width: 100%;
  }

  .sheet {
    width: 20%;
    position: fixed;
    right: 60px;
    background-color: #fafafa;
    top: 190px;
  }

  .text {
    font-size: 20px;
    padding: 18px 0;
    display: inline-block;
  }

  .btn-width {
    width: 35%;
  }

  .item {
    width: 20%;
  }

  .font-size-fouth {
    font-size: 20px;
  }

  .topic-item {

  }

  .display-flex {
    display: flex;
    flex-direction: row;
  }

  .display-flex-item {
    width: 25%;
    font-size: 20px;
  }

  .margin-bottom {
    margin-bottom: 2%;
  }

  .margin-top-five {
    margin-top: 1%;
  }

  .input {
    width: 20%;
    vertical-align: middle;
  }

  .textarea {
    width: 50%;
  }

  .font-size {
    font-size: 20px;
  }

  .top {
    margin-top: 3%;
  }

  h2 {
    margin-bottom: 1%;
  }

  .margin-left {
    margin-top: 3%;
    margin-bottom: 5%;
    margin-left: 40%;
  }

  a {
    text-decoration: none;
    color: #444444;
  }

  /deep/ .el-radio__label, /deep/ .el-checkbox__label {
    font-size: 18px !important;
    text-align: center;
  }

  .block {
    display: block;
  }

  .none {
    display: none;
  }

  .width {
    width: 100%;
    margin-left: 20%;
  }

  .btn-wthree {
    display: inline-block;
  }

  .text-align {
    text-align: center;
    width: 100%;
  }

  .dialog-width {
    width: 150%;
    margin-left: -25%;
  }

  .btn-color {
    background-color: #42b983;
  }


  @media screen and (max-width: 1080px) {
    .question-title {
      font-size: 23px;
      font-weight: 600;
    }

    h1 {
      font-size: 20px;
    }

    h1, .box-card {
      margin-left: -23%;
    }

    .font-size {
      font-size: 16px;
    }

    .box-card {
      width: 160%;
      margin-bottom: 10%;
    }

    /deep/ .el-radio__label, /deep/ .el-checkbox__label {
      font-size: 15px !important;
    }
  }

  @media screen and (min-width: 1080px) and (max-width: 1800px) {

    .test {
      width: 80%;
    }

    .question-title {
      font-size: 23px;
      font-weight: 600;
    }

    h1 {
      font-size: 20px;
    }

    h1, .box-card {
      margin-left: -23%;
    }

    .font-size {
      font-size: 16px;
    }

    .title{
      margin-left: 1%;
      margin-bottom: 2%;
    }

    .box-card {
      width: 122%;
      margin-bottom: 3%;
      padding-left: 1%;
      margin-left: 1%;
    }

    /deep/ .el-radio__label, /deep/ .el-checkbox__label {
      font-size: 15px !important;
    }

    .dialog-width {
      width: 60%;
      margin-left: 20%;
    }
  }

  .font_line_height{
    height: 20px;
    line-height: 20px;
  }

  .trues {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 20%;
    height: 100px;
  }

  .t {
    position: fixed;
    bottom: 1px;
    left: 1px;
    background-color: #e9e9e9;
    width: 20px;
    height: 20px;
  }

  .score{
    margin-top: 5px;
  }
  .result{
    margin-top: 5px;
  }
  .analyze{
    margin-top:5px;
  }
  .answer{
    margin-top: 10px;
    color: red;
  }
  .correct{
    margin-top: 10px;
  }

  .font_size{
    font-size: 15px;
  }

  .vertial{
    align-items: center;
  }
</style>
